<template>
  <div class='hrTargetManage' >
      <el-row class='first-title'>
        <div class="lf">
          <h3>HR指标管理</h3>
        </div>
        <search-box class="search" @getValue="getSearchText"></search-box>
      </el-row>
      <el-row class="third-card">
          <div class="table-container">
            <div class="handle-table">
                <!-- <drop-checkbox-group
                    class="rt"
                    trigger='click'
                    :checkOptions='dropCheckOptions'
                    :handleCheckedChange='dropCheckedChange'>
                </drop-checkbox-group> -->
                <div class="left">
                    <el-button-group>
                        <el-button icon="plus" @click="hrCreateClick">
                            创建
                        </el-button>
                        <el-button icon="delete" type="danger" @click="hrDeleteClick">
                            删除
                        </el-button>
                    </el-button-group>
                </div>
            </div>
            <el-table
                :data="hrTable.hrTableData"
                style="width: 100%"
                :row-class-name="handleRowClass"
                @selection-change='tableSelectionChange'
                >
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    v-for="column in hrTable.hrColumns"
                    :key='column.prop'
                    :prop='column.prop'
                    :label='column.label'
                    :width='column.width'>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="160">
                    <template scope="scope">
                        <el-button
                            class="successBt"
                            @click="hrDetailClick(scope.row)"
                            type="text"
                            size="small">
                            详情
                        </el-button>
                        <el-button
                            @click="hrEditClick(scope.row)"
                            type="text"
                            size="small">编辑</el-button>
                        <el-button
                            class="dangerBt"
                            @click="hrAddClick(scope.row)"
                            type="text"
                            size="small">填值</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationDiv">
                <my-pagination
                    :sizeChange='handleSizeChange'
                    :currentChange='handleCurrentChange'
                    :totals='pagination.total'>
                </my-pagination>
            </div>
         </div>
      </el-row>
      <el-dialog
        title="详情"
        :visible.sync="lookDialog.lookDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="lookModal">
        <div>
            <ul>
                <li>
                    <div class="title">编号:</div>
                    <div class="value">{{lookDialog.lookForm.number}}</div>
                </li>
                <li>
                    <div class="title">中文名称:</div>
                    <div class="value">{{lookDialog.lookForm.china_name}}</div>
                </li>
                <li>
                    <div class="title">分类:</div>
                    <div class="value">{{lookDialog.lookForm.type}}</div>
                </li>
                <li>
                    <div class="title">单位:</div>
                    <div class="value">{{lookDialog.lookForm.unit}}</div>
                </li>
                <li>
                    <div class="title">保留小数位:</div>
                    <div class="value">{{lookDialog.lookForm.keep_valid}}</div>
                </li>
            </ul>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="lookDialog.lookDialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        :title="editDialog.title"
        :visible.sync="editDialog.editDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="editModal">
        <div class="editModalDiv">
           <el-form ref="form" :model="editDialog.editForm" label-width="100px">
                <el-form-item label="编号">
                    <el-input v-model="editDialog.editForm.number"></el-input>
                </el-form-item>
                <el-form-item label="中文名称">
                    <el-input v-model="editDialog.editForm.china_name"></el-input>
                </el-form-item>
                <el-form-item label="分类">
                    <el-select v-model="editDialog.editForm.type">
                        <el-option
                          v-for="item in editDialog.typeList"
                          :key="item.code_name"
                          :label="item.code_name"
                          :value="item.code_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="单位">
                    <el-input v-model="editDialog.editForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="保留小数位">
                    <el-input v-model="editDialog.editForm.keep_valid"></el-input>
                </el-form-item>
           </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="editHrSure">确 定</el-button>
            <el-button @click="editDialog.editDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="填值"
        :visible.sync="addDialog.addDialogVisible"
        width="50%"
        :lock-scroll='false'
        class="addModal">
        <div class="entryValueContent">
            <div>
                <div class="tabTitle">全集团指标值<span> (单位:{{hrRowData.unit}})</span></div>
                <el-table
                    :data="addDialog.addTableDataAll"
                    style="width: 100%">
                    <el-table-column
                        v-for="column in addDialog.addColumnsAll"
                        :key='column.prop'
                        :prop='column.prop'
                        :label='column.label'
                        :width='column.width'>
                        <template scope='scope'>
                            <input
                                type='number'
                                class="small"
                                v-model.number="scope.row[column.prop]">
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div>
                <div class="tabTitle">各单位指标值<span> (单位:{{hrRowData.unit}})</span></div>
                <el-table
                    :data="addDialog.addTableDataOffice"
                    style="width: 100%">
                    <el-table-column
                        type='index'
                        width='60'>
                    </el-table-column>
                    <el-table-column
                        prop='descrshort'
                        label='单位'
                        width=''>
                    </el-table-column>
                    <el-table-column
                        v-for="column in addDialog.addColumnsOffice"
                        :key='column.prop'
                        :prop='column.prop'
                        :label="column.label"
                        :width='column.width'>
                        <template scope='scope'>
                            <input
                                type='number'
                                class="small"
                                v-model.number="scope.row[column.prop]">
                            <!-- <div>{{scope.row[column.prop]}}</div> -->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="hrAddSure">确 定</el-button>
            <el-button @click="addDialog.addDialogVisible = false">取 消</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
    import Vue from 'vue'
    import dropCheckboxGroup from '@/components/public/DropCheckboxGroup'
    import myPagination from '@/components/public/pagination'
    import searchBox from '@/components/public/search-box'
    import {
        MessageBox,
        Message,
        Button,
        ButtonGroup,
        Switch,
        Select,
        Input,
        Col,
        Row,
        Radio,
        RadioGroup,
        RadioButton,
        Option,
        Table,
        TableColumn,
        Form,
        FormItem} from 'element-ui'
    // Vue.use(MessageBox)
    // Vue.use(Message)
    Vue.use(Button)
    Vue.use(ButtonGroup)
    Vue.use(Switch)
    Vue.use(Select)
    Vue.use(Input)
    Vue.use(Col)
    Vue.use(Row)
    Vue.use(Radio)
    Vue.use(RadioGroup)
    Vue.use(RadioButton)
    Vue.use(Option)
    Vue.use(Table)
    Vue.use(TableColumn)
    Vue.use(Form)
    Vue.use(FormItem)
    
    // const DetailTable = r => require.ensure([],() => r(require("@/components/leader/table-a")),'DownSel');
    export default {
      data() {
        return {
          controlTableType:'look',
          searchText:'',
          hrRowData:{},
          tableSelections:[],
          hrTable:{
              hrTableData:[],
              hrColumns:[
                {
                prop: "number",
                label: "编号",
                width: ""
                },
                {
                prop: "china_name",
                label: "名称",
                width: "120"
                },
                {
                prop: "type",
                label: "分类",
                width: "120"
                },
                {
                prop: "unit",
                label: "单位",
                width: "120"
                },
                {
                prop: "keep_valid",
                label: "保留小数位",
                width: "120"
                }
              ]
          },
          pagination:{
              total:0,
              pageSize:10,
              pageNum:1
          },
          editDialog:{
              title:'创建',
              editDialogVisible:false,
              editForm:{},
              typeList:[]
          },
          lookDialog:{
              lookDialogVisible:false,
              lookForm:{}
          },
          addDialog:{
            addDialogVisible:false,
            addTableDataAll:[],
            addColumnsAll:[
                {
                    prop:'',
                    label:''
                },
                {
                    prop:'',
                    label:''
                },
                {
                    prop:'',
                    label:''
                }
            ],
            addTableDataOffice:[],
            addTableDataOfficeCopy:[],
            addColumnsOffice:[
                {
                    prop:'beforeYear',
                    label:'',
                    width:'120'
                },
                {
                    prop:'lastYear',
                    label:'',
                    width:'120'
                },
                {
                    prop:'thisYear',
                    label:'',
                    width:'120'
                }
            ]
          }
        }
      },
      methods: {
        initAddTableData:function(){
            var thisYear = new Date().getFullYear()
            var mid
            for(var i=0; i<this.addDialog.addColumnsAll.length; i++){
                mid = thisYear-this.addDialog.addColumnsAll.length+i+1
                this.addDialog.addColumnsAll[i].prop = ''+mid
                this.addDialog.addColumnsAll[i].label = ''+mid
                this.addDialog.addColumnsOffice[i].label = ''+mid
            }
        },
        isEqualObject:function(a,b){
            //判断两个对象是否内容相等
            var propsA = Object.getOwnPropertyNames(a),
            propsB = Object.getOwnPropertyNames(b);
            if(propsA.length != propsB.length){
                return false;
            }
            for(var i=0;i<propsA.length;i++){
                var propName=propsA[i];
                if(a[propName] !== b[propName]){
                    return false;
                }
            }
            return true;
        },
        confirmModal:function(title,content,type,sureCB,cancelCB){
            MessageBox.confirm(content, title, {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: type? type: 'warning'
            }).then(() => {
                if(sureCB){
                    sureCB()
                }
            }).catch(() => {
                if(cancelCB){
                    cancelCB()
                }
            });
        },
        dropCheckedChange:function(v){
            console.log('dropCheckedChange',v)
        },
        clearEditForm:function(){
            for(var key in this.editDialog.editForm){
                this.editDialog.editForm[key] = ''
            }
        },
        tableSelectionChange:function(selection){
            this.tableSelections = selection
        },
        // 获取表格数据
        getTableData:function(){
            var params = {
                search:this.searchText,
                pageSize:this.pagination.pageSize,
                pageNum:this.pagination.pageNum
            }
            this.ajaxPost('/hrNormManager/queryList',params,this.getTableDataCB)
        },
        getTableDataCB:function(res){
            if (res.data.status === 1) {
                this.hrTable.hrTableData = res.data.datas.showList
                this.pagination.total = res.data.total
            }
        },
        // 创建表格数据
        hrCreateClick:function(row){
            this.ajaxPost('/hrNormManager/addHrNormMan',null,this.hrCreateClickCB)
        },
        hrCreateClickCB:function(res){
            if(res.data.status === 1){
                this.editDialog.editDialogVisible = true
                this.controlTableType = 'create'
                this.clearEditForm()
                this.editDialog.title = '创建'
                this.editDialog.typeList = res.data.datas.hrNornTypes
                delete this.editDialog.editForm.id;
            }
        },
        // 删除表格数据
        hrDeleteClick:function(row){
            if(!this.tableSelections.length){
                return Message.error('请选择要删除的项!')
            }
            this.confirmModal('提示','确定要删除吗?','',this.hrDeleteSure)
        },
        hrDeleteSure:function(){
            var ids = []
            for(var i=0; i<this.tableSelections.length; i++){
                ids.push(this.tableSelections[i].id)
            }
            this.ajaxPost('/hrNormManager/deleteHrNorm',{ids},this.hrDeleteSureCB)
        },
        hrDeleteSureCB:function(res){
            if(res.data.status === 1){
                Message.success('删除成功!')
                this.getTableData()
            }
        },
        // 查看表格数据
        hrDetailClick:function(row){
            this.controlTableType = 'look'
            this.ajaxPost('/hrNormManager/queryDetail',{id:row.id},this.hrDetailClickCB)
        },
        hrDetailClickCB:function(res){
            if(res.data.status === 1){
                if(this.controlTableType === 'look'){
                    this.lookDialog.lookDialogVisible = true
                    this.lookDialog.lookForm = res.data.datas.hrNornDetail
                }else if(this.controlTableType === 'edit'){
                    this.editDialog.title = '编辑'
                    this.editDialog.editDialogVisible = true
                    this.editDialog.editForm = res.data.datas.hrNornDetail
                    this.editDialog.typeList = res.data.datas.hrNornTypes
                }
            }
        },
        // 编辑表格数据
        hrEditClick:function(row){
            this.controlTableType = 'edit'
            this.ajaxPost('/hrNormManager/queryDetail',{id:row.id},this.hrDetailClickCB)
        },
        editHrSure:function(){
            this.ajaxPost('/hrNormManager/modifyHrNormMan',this.editDialog.editForm,this.editHrSureCB)
        },
        editHrSureCB:function(res){
            if(res.data.status === 1){
                this.editDialog.editDialogVisible = false
                if(this.controlTableType === 'create'){
                    Message.success('创建成功!')
                }else if(this.controlTableType === 'edit'){
                    Message.success('编辑成功!')
                }
                this.getTableData()
            }
        },
        // 填值表格数据
        hrAddClick:function(row){
            this.hrRowData = row
            this.ajaxPost('/hrNormManager/getFillValueDetail',{number:row.number},this.hrAddClickCB)
        },
        hrAddClickCB:function(res){
            if(res.data.status === 1){
                var mid,flag=false
                this.addDialog.addDialogVisible = true
                this.addDialog.addTableDataAll = [res.data.datas.group]
                this.addDialog.addTableDataOffice = JSON.parse(JSON.stringify(res.data.datas.mainList))
                this.addDialog.addTableDataOfficeCopy = JSON.parse(JSON.stringify(res.data.datas.mainList))
            }
        },
        hrAddSure:function(){
            var obj = JSON.parse(JSON.stringify(this.addDialog.addTableDataOffice))
            var obj2 = JSON.parse(JSON.stringify(this.addDialog.addTableDataOfficeCopy))
            var data = []
            var mid, params
            for(var i=0; i<obj.length ;i++){
                mid = false
                for(var j=0; j<obj2.length; j++){
                    if(obj[i].setid === obj2[j].setid){
                        mid = this.isEqualObject(obj[i],obj2[j])
                        if(!mid){
                            data.push(obj[i])
                        }
                        break
                    }
                }
            }
            params = {
                group:this.addDialog.addTableDataAll[0],
                mainList: data,
                number: this.hrRowData.number
            }
            this.ajaxPost('/hrNormManager/saveFillValue',params,this.hrAddSureCB)
        },
        hrAddSureCB:function(res){
            if(res.data.status === 1){
                this.addDialog.addDialogVisible = false
                Message.success('填值成功!')
            }else{
                Message.error('填值失败!')
            }
        },
        handleSizeChange:function(val){
            this.pagination.pageSize=val
            this.getTableData()
        },
        handleCurrentChange:function(val){
            this.pagination.pageNum=val
            this.getTableData()
        },
        getSearchText:function(text){
            this.searchText = text.trim();
            var params = {
                search:this.searchText,
                pageSize:this.pagination.pageSize,
                pageNum:1
            };
            this.ajaxPost('/hrNormManager/queryList',params,this.getTableDataCB);
        },
        ajaxPost:function(url,params,callback){
            var self = this;
            this.Axios.Post(url,params)
                .then(function(res){
                    if(callback){
                        callback(res,self)
                    }
                })
        }
      },
      computed:{
      },
      filters:{
      },
      mounted: function () {
        //初始化填值表格中的数据
        this.initAddTableData()
        this.getTableData()
      },
      components: {
          myPagination,
          searchBox,
          dropCheckboxGroup
      },
      watch:{
      }
    }
</script>

<style scoped>
    input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #bfcbd9;
        color: #1f2d3d;
        font-size: inherit;
        height: 36px;        
        line-height: 1;
        width: 100%;
        display: inline-block;
        box-sizing: border-box;
        outline: 0;
        padding: 3px 10px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    input.small{
        height: 30px;
    }
    input.mini{
        height: 24px;
    }
    .hrTargetManage .first-title h3{
        font-size: 24px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
        line-height: 1.1;
    }
    .hrTargetManage .first-title .search{
        float: right;
        margin-top: 15px;
    }
    .hrTargetManage .second-sec{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 50px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        color:#444;
        font-family: "Microsoft YaHei",museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
    }
    .hrTargetManage .table-container{
        position: relative;
        border-radius: 3px;
        background: #ffffff;
        border-top: 3px solid #d2d6de;
        margin-bottom: 20px;
        width: 100%;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        border-top-color: #00a65a;
        background-color:#fff;
        padding: 0 10px;
        min-height: 400px;
    }
    .hrTargetManage .handle-table{
        clear: both;
        padding:20px 20px 30px 20px;
        border-bottom: 1px solid #dfe6ec;
    }
    .hrTargetManage .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      position: relative;
      clear: both;
      
    }
    .hrTargetManage .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
        
    }
    .hrTargetManage .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .hrTargetManage .selectSet .alt{
        margin-right:-1px;
    }

    .hrTargetManage .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    .hrTargetManage .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
    .hrTargetManage .third-card .collapse-card .box-title{
        display: inline-block;
        font-size: 18px;
        color: #444;
        font-weight: 500;
        margin: 0;
        line-height: 1;
    }
    .hrTargetManage .third-card .collapse-card .collapse-container {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor:pointer;
    }
    .hrTargetManage .third-card .collapse-card  .collapse {
        border-radius: 3px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 0px;
        padding: 5px;
        font-size: 12px;
        background: transparent;
        color: #97a0b3;
    }
    .hrTargetManage .totalNum{
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        position:relative;
    }
    .hrTargetManage .paginationDiv{
        padding: 10px 0;
        margin-top: 20px;
    }
    .lookModal li{
        padding:  10px 40px 10px 20px;
    }
    .lookModal .title{
        float: left;
        width: 100px;
        text-align: right;
        font-weight: bold;
        min-height: 24px;

    }
    .lookModal .value{
        margin-left: 110px;
        border-bottom: 1px solid #eee;
        padding: 0 10px;
        min-height: 24px;
        position: relative;
        top: 12px;
    }
    .editModal .editModalDiv{
        padding: 0 40px 0 20px;
    }
    .addModal .entryValueContent>div:first-child{
        margin-bottom: 20px;
    }
    .addModal .entryValueContent .tabTitle{
        font-weight: bold;
        padding: 5px 0;
    }
</style>
<style>
</style>
